// src/index.tsx

// 引入 React 库，它是构建用户界面的核心库
import React from 'react';
// 引入 ReactDOM 的 createRoot 方法，用于创建根渲染器，将 React 应用渲染到 DOM 中
import ReactDOM from 'react-dom/client';
// 引入自定义的 App 组件，它是整个应用的主要组件
import App from '../../App';
// 引入自定义的 AutofitWrapper 组件，可能用于处理自动适配相关的逻辑
import AutofitWrapper from '../../components/AutofitWrapper';

// 定义 Root 组件，它是一个函数式组件
const Root = () => (
  // 使用 AutofitWrapper 组件包裹 App 组件，将自动适配逻辑应用到 App 组件上
  <AutofitWrapper>
    {/* 渲染 App 组件 */}
    <App />
  </AutofitWrapper>
);

// 使用 ReactDOM 的 createRoot 方法创建一个根渲染器，将其绑定到 HTML 文档中 id 为 'root' 的元素上
// 这里使用类型断言 as HTMLElement 确保获取到的元素是 HTMLElement 类型
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

// 使用根渲染器的 render 方法将组件渲染到 DOM 中
// 使用 React.StrictMode 包裹 Root 组件，它可以帮助我们在开发阶段发现潜在的问题，例如不安全的生命周期方法等
root.render(
  <React.StrictMode>
    {/* 渲染 Root 组件 */}
    <Root />
  </React.StrictMode>
);